{% extends "layout.html" %}
{% block body %}

    <div style="float: right;">
        <table align="left" style="background-image:url('/static/img/bj3.jpg')">
            <script>
                $(function () {
                    $("button_ctl").click(function () {
                        $.post("/cmd", this.id, function (data, status) {
                        });
                    });
                });
            </script>
            <tr>
                <td align="left" valign="top"></td>
                <th id="t_up" class="button_ctl" style="background-image:url('/static/img/up.png');"></th>
            </tr>
            <tr>
                <th id="t_left" class="button_ctl" style="background-image:url('/static/img/left.png');"></th>
                <th id="t_stop" class="button_ctl" style="background-image:url('/static/img/stop.png');"></th>
                <th id="t_right" class="button_ctl" style="background-image:url('/static/img/right.png');"></th>
            </tr>
            <tr>
                <th></th>
                <th id="t_down" class="button_ctl" style="background-image:url('/static/img/down.png');"></th>
            </tr>
            <tr>
                <th id="t_open" class="button_ctl" style="background-image:url('/static/img/open.png');"></th>
                <th id="t_servod" class="button_ctl" style="background-image:url('/static/img/servod.png');"></th>
                <th id="t_close" class="button_ctl" style="background-image:url('/static/img/close.png');"></th>
            </tr>
        </table>

    </div>
    <div style="float: left"><img src="http://192.168.1.66:8080/?action=stream"></div>
{% endblock %}
